<style lang="sass" scoped>
    .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td{
        vertical-align: middle;
    }
    .h-search{
        vertical-align: middle;
        line-height: 15px;
    }
    .comm_content_top{
        .brank_nav{
            float: left
        }
        .search{
        }
    }
    .com-block{
        background: #fff;
        padding:15px;
        margin-top:20px;
        // 通用样式
        .form-content{
            clear:both;
            .content-group{
                width: 600px;
                float:left;
                margin-bottom: 10px;
                clear:both;
                .label-group{
                    height: 33px;
                    float: left;
                    width: 120px;
                }
                .input-groups{
                    margin-left:20px;
                    width: 400px;
                    float: left;
                    .product-label{
                        width: 120px;
                        margin-right: 10px;
                        height: 30px;
                        line-height: 30px;
                        background-color: #fafafa;
                        border: 1px solid #d6dee3;
                        display: block;
                        float: left;
                        cursor: pointer;
                        text-align: center;
                        &.active{
                            background-color: #5974d9 !important;
                            color:#fff;
                        }
                    }
                }
            }
        }
    }
</style>

<template>
<div class="container-fluid">
    <div class="comm_content_top clearfix">
        <nav-bar>
            <li slot="nav_two">服务器管理</li>
        </nav-bar>
    </div>
    <div class="com-block clearfix">
        <div class="form-content">
            <div class="content-group clearfix">
                <div class="label-group clearfix">
                    <span class='float-right'>IP：</span>
                </div>
                <div class='input-groups'>
                    {{dataInfo.ip}}
                </div>
            </div>
            <div class="content-group clearfix">
                <div class="label-group clearfix">
                    <span class='float-right'>在线人数：</span>
                </div>
                <div class='input-groups'>
                    {{dataInfo.peopleNumer}}
                </div>
            </div>
            <div class="content-group clearfix">
                <div class="label-group clearfix">
                    <span class='float-right'>ping：</span>
                </div>
                <div class='input-groups'>
                    {{dataInfo.ping}}
                </div>
            </div>
            <div class="content-group clearfix">
                <div class="label-group clearfix">
                    <span class='float-right'>空闲的范围：</span>
                </div>
                <div class='input-groups'>
                    <input
                        v-model="dataInfo.freeRange" 
                        type="text" class="form-control w-100 inline_block">
                    <span class="inline_block ml10">格式：0,100，表示0 <= x < 100</span>
                </div>
            </div>
            <div class="content-group clearfix">
                <div class="label-group clearfix">
                    <span class='float-right'>繁忙的范围：</span>
                </div>
                <div class='input-groups'>
                    <input
                        v-model="dataInfo.busyRange" 
                        type="text" class="form-control w-100 inline_block">
                    <span class="inline_block ml10">格式：100,500, 表示100 <= x < 500</span>
                </div>
            </div>
            <div class="content-group clearfix">
                <div class="label-group clearfix">
                    <span class='float-right'>拥挤的范围：</span>
                </div>
                <div class='input-groups'>
                    <input
                        v-model="dataInfo.crowdRange" 
                        type="text" class="form-control w-100 inline_block">
                    <span class="inline_block ml10">格式：500, 表示 500 <= x</span>
                </div>
            </div>
            <div class="content-group clearfix">
                <button
                    @click="modifyServerRange()" 
                    class="btn btn-primary">更新服务器状态范围</button>
            </div>
            <div class="content-group clearfix">
                <div class="label-group clearfix">
                    <span class='float-right'>房间总数：</span>
                </div>
                <div class='input-groups'>
                    {{search.totalcount}}
                </div>
            </div>
            <div class="content-group clearfix">
                <div class="search w-200 inline_block">
                    <input type="text" class="form-control" placeholder="根据房间号进行查询">
                </div>
                <table class="table table-bodered table_color">
                    <thead>
                        <tr>
                            <th>房间号</th>
                            <th>用户数</th>
                            <th>是否开局</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,i) in dataList">
                            <td @click="getUserList(item.roomId)">{{item.roomId}}</td>
                            <td>{{item.userNumber}}</td>
                            <td>{{item.status==1?'已开局':'等待开局'}}</td>
                            <td>
                                <button 
                                    @click="removeServerRoomInfo(item.roomId)"
                                    class="btn btn-primary btn-xs">清除房间</button>
                            </td>
                        </tr>
                        <tr v-if="dataList.length == 0">
                            <td colspan="4"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="content-group clearfix">
                <page
                    :now-page="search.page"
                    :page-size="search.pageSize"
                    :is-page-list="true"
                    :total-count="search.totalcount"
                    :is-search="search.isSearch"
                    @onPropsChange="searchChange"></page>
            </div>
            <div 
                v-if="roomId!=''"
                class="content-group clearfix mt20">
                <div>房间号：{{roomId}}</div>
                <table class="table table-bordered table_color">
                    <thead>
                        <tr>
                            <th>昵称</th>
                            <th>uid</th>
                            <th>积分</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,i) in userList">
                            <td>{{item.nickname}}</td>
                            <td>{{item.uid}}</td>
                            <td>{{item.integral}}</td>
                            <td>
                                <button 
                                    @click="removeServerRoomInfo(item.roomId)"
                                    class="btn btn-primary btn-xs">清除用户</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    
</div>
</template>

<script>
    import page from 'components/page'
    import navBar from 'components/navBar'
    export default {
        components: {
           page,
           navBar,
        },
        data(){
            return {
                search:{
                    page:1,
                    totalcount:0,
                    isSearch:false,
                    pageSize:config.pageSize,
                    keyWord:'',
                    ip:this.$route.query.ip
                },
                dataInfo:{},
                dataList:[],
                roomId:'',//选中的房间号
                userList:[]
            }
        },
        watch:{
            
        },
        created(){

        },
        mounted() {
            this.$nextTick(()=>{
                this.getInfo();
                this.getList();
            })
        },
        methods:{
            searchChange(prop,val){
                this['search'][prop] = val;
            },
            //
            getInfo(){
                util.ajax({
                    url:config.baseApi + 'game-manage/api/server/getServerDetail',
                    data:{
                        ip:this.search.ip
                    },
                    success:(data=>{
                        this.dataInfo = data.data;
                    })
                })
            },
            getList(){
                let obj = JSON.parse(JSON.stringify(this.search));
                util.ajax({
                    url:config.baseApi + 'game-manage/api/server/getServerRoomList',
                    data:obj,
                    success:(data=>{
                        this.dataList = data.data.record;
                        this.search.totalcount = data.data.totalNum;
                    })
                })
            },
            //更新服务器状态范围
            modifyServerRange(){
                let obj = {
                    ip:this.dataInfo.ip, //  是   string  ip
                    port:this.dataInfo.port, //    是   int 端口号
                    freeRange:this.dataInfo.freeRange, //   是   string  空闲的范围，格式：0,100，表示0 <= x < 100
                    busyRange:this.dataInfo.busyRange, //   是   string  繁忙的范围，格式：100,500, 表示100 <= x < 500
                    crowdRange:this.dataInfo.crowdRange, //  是   string  拥挤的范围，格式：500, 表示 500 <= x
                }
                if(obj.freeRange == ''){
                    popup.alert({title:'请输入服务器空闲的范围！'});
                    return;
                }
                if(obj.busyRange == ''){
                    popup.alert({title:'请输入服务器繁忙的范围！'});
                    return;
                }
                if(obj.crowdRange == ''){
                    popup.alert({title:'请输入服务器拥挤的范围！'});
                    return;
                }
                util.ajax({
                    url:config.baseApi + 'game-manage/api/server/modifyServerRange',
                    data:obj,
                    success:(data=>{
                        popup.miss({title:'更新成功！'});
                    })
                })
            },
            //清除房间
            removeServerRoomInfo(roomId){
                popup.confirm({
                    title:'是否清除该房间？',
                    yes:()=>{
                        util.ajax({
                            url:config.baseApi + 'game-manage/api/server/removeServerRoomInfo',
                            data:{
                                roomId:roomId
                            },
                            success:()=>{
                                popup.miss({title:'清除成功！'});
                                this.getList();
                            }
                        })
                    }
                })
            },
            getUserList(roomId){
                util.ajax({
                    url:config.baseApi + 'game-manage/api/server/getServerRoomDetail',
                    data:{
                        roomId:roomId
                    },
                    success:(data=>{
                        this.userList = data.data;
                    })
                })
            },
            //清除用户
            removeServerRoomInfo(uid){
                popup.confirm({
                    title:'是否清除该用户？',
                    yes:()=>{
                        util.ajax({
                            url:config.baseApi + 'game-manage/api/server/removeServerRoomInfo',
                            data:{
                                uid:uid, // 是   string  uid
                                roomId:this.roomId, //  是   string  房间ID
                            },
                            success:()=>{
                                popup.miss({title:'清除成功！'});
                                this.getUserList();
                            }
                        })
                    }
                })
            }
        }
    }
</script>
